<template>
  <div class="api-test">
    <h2>API测试页面</h2>
    
    <div class="test-section">
      <h3>测试 /api/user/update/my 接口</h3>
      
      <div class="form-group">
        <label>昵称:</label>
        <input v-model="testData.nickname" placeholder="输入昵称" />
      </div>
      
      <div class="form-group">
        <label>头像URL:</label>
        <input v-model="testData.userAvatar" placeholder="输入头像URL" />
      </div>
      
      <div class="form-group">
        <label>公司:</label>
        <input v-model="testData.company" placeholder="输入公司" />
      </div>
      
      <div class="form-group">
        <label>职位:</label>
        <input v-model="testData.position" placeholder="输入职位" />
      </div>
      
      <div class="form-group">
        <label>地址:</label>
        <input v-model="testData.location" placeholder="输入地址" />
      </div>
      
      <div class="form-group">
        <label>个人简介:</label>
        <textarea v-model="testData.userProfile" placeholder="输入个人简介"></textarea>
      </div>
      
      <div class="form-group">
        <label>个人网站:</label>
        <input v-model="testData.website" placeholder="输入个人网站" />
      </div>
      
      <div class="form-group">
        <label>GitHub:</label>
        <input v-model="testData.githubUrl" placeholder="输入GitHub链接" />
      </div>
      
      <div class="form-group">
        <label>微博:</label>
        <input v-model="testData.weiboUrl" placeholder="输入微博链接" />
      </div>
      
      <button @click="testUpdateAPI" :disabled="loading">
        {{ loading ? '测试中...' : '测试更新API' }}
      </button>
      
      <div v-if="result" class="result">
        <h4>测试结果:</h4>
        <pre>{{ JSON.stringify(result, null, 2) }}</pre>
      </div>
      
      <div v-if="error" class="error">
        <h4>错误信息:</h4>
        <pre>{{ JSON.stringify(error, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { userAPI } from '@/api/index.js';

export default {
  name: 'ApiTest',
  data() {
    return {
      loading: false,
      result: null,
      error: null,
      testData: {
        nickname: '测试昵称',
        userAvatar: 'https://example.com/avatar.jpg',
        company: '测试公司',
        position: '测试职位',
        location: '测试地址',
        userProfile: '这是一个测试简介',
        website: 'https://example.com',
        githubUrl: 'https://github.com/test',
        weiboUrl: 'https://weibo.com/test'
      }
    }
  },
  methods: {
    async testUpdateAPI() {
      this.loading = true;
      this.result = null;
      this.error = null;
      
      console.log('=== 开始测试API ===');
      console.log('发送的数据:', this.testData);
      
      try {
        const response = await userAPI.updateUserInfo(this.testData);
        console.log('API响应:', response);
        this.result = response;
      } catch (err) {
        console.error('API错误:', err);
        this.error = {
          message: err.message,
          status: err.response?.status,
          statusText: err.response?.statusText,
          data: err.response?.data,
          config: {
            url: err.config?.url,
            method: err.config?.method,
            data: err.config?.data
          }
        };
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin: 10px 0;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group textarea {
  height: 80px;
  resize: vertical;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px 0;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.result {
  margin: 20px 0;
  padding: 15px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
}

.error {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>